<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>菜单</title>

		<script src="../layui/layui.js" type="text/javascript"></script>
		<link href="../layui/css/layui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="layui-panel" style="padding: 8px;">
			<fieldset class="layui-elem-field layui-border-green">
				<legend>搜索信息</legend>
				<form class="layui-form layui-form-pane" style="margin: 20px;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-inline">
								<input class="layui-input" type="text" name="name" autocomplete="off" />
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
									<i class="layui-icon layui-icon-search"></i>
									搜索
								</a>
							</div>
						</div>
					</div>
				</form>
			</fieldset>
			<div>
				<table id="menuTable" lay-filter="menuTable" class="layui-table layui-form"></table>
			</div>
		</div>
		<script id="tool" type="text/html">
			<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
			<!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>-->
		</script>
		<script id="tableBar" type="text/html">
			<a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</a>
			<!--<a class="layui-btn layui-btn-danger layui-btn-md" lay-event="delete">
				<i class="layui-icon layui-icon-delete"></i>
				删除
			</a>-->
		</script>
		<script id="swichType" type="text/html">
			<input type="checkbox" name="type" value="{{d.type}}" readonly
				lay-skin="switch" lay-text="菜单|功能" {{d.type=='menu'?"checked":""}} />
		</script>
		<script id="swichStatus" type="text/html">
			<input type="checkbox" name="status" value="{{d.status}}" title="可用" {{d.status==0?"checked":""}} />
		</script>
		<script>
			var data = [
				{"id":1,"name":"菜单1","pid":0,"icon":"","url":"","type":"menu","remark":"{system}","sort":1,"createTime":"2021-08-17","status":0},
				{"id":4,"name":"子菜单1","pid":1,"icon":"","url":"","type":"menu","remark":"{system}","sort":1,"createTime":"2021-08-17"},
				{"id":2,"name":"菜单1","pid":0,"icon":"","url":"","type":"menu","remark":"{system}","sort":1,"createTime":"2021-08-17"},
				{"id":3,"name":"子菜单1","pid":2,"icon":"","url":"","type":"menu","remark":"{system}","sort":1,"createTime":"2021-08-17"},
				{"id":5,"name":"菜单","pid":4,"icon":"","url":"","type":"btn","remark":"{system}","sort":1,"createTime":"2021-08-17"}
			]
			//加入插件模块
			layui.config({
				base:'../js/'
			})
			layui.use(['form','layer','treeTable'],function(){
				var treeTable = layui.treeTable,form = layui.form;

				//加载表格
				treeTable.render({
					elem:'#menuTable',
					height:'full-160',
					toolbar:'#tableBar',
					//url:'',
					tree:{
						iconIndex:2,//图表列的下标值
						isPidData:true,//是否为树形
						idName:'id',//id唯一值的列属性名
						pidName:'pid',//父id值的列属性名
						openName:true//是否默认打开
					},
					cols:[[
						{type:'checkbox',fixed:'left'},
						{type:'numbers',fixed:'left'},
						{field:'name',title:'名称',width:200},
						{field:'icon',title:'图标',width:100},
						{field:'url',title:'链接地址'},
						{field:'type',title:'类型',width:100,templet:'#swichType',unresize:true},
						{field:'remark',title:'权限标识',width:180},
						{field:'sort',title:'排序',width:80},
						{field:'status',title:'是否可用',width:110,templet:'#swichStatus',unresize:true},
						{field:'crateTime',title:'创建时间',width:200},
						{fixed:'right',title:'操作',width:100,align:'center',toolbar:'#tool'},
					]],
					data:data
				})

				//监听搜索按钮
				form.on('submit(searchBtn)',function(data){
					var dataForm = data.field;
					console.log(dataForm);
				})


			});
		</script>


	</body>
</html>
